<template>
   <view style="wrap">
        <!-- 仅用于计算（结构和样式请和阅读页一致） -->
		<view class="wrap-container hidden">
			<view class="wrap-content-title">章节名</view>
			<view id="content" class="wrap-content">
				<view class="inner-box" :style="{height: `${innerHeight}px`}">
					<view class="book-inner" id="preChapter" v-html="preChapter.text":style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`}"></view>
				</view>
			</view>
			<view class="wrap-bottom-bar">显示电量、页码</view>
		</view>
		
		<view class="wrap-container hidden">
			<view class="wrap-content-title">章节名</view>
			<view class="wrap-content">
				<view class="inner-box" :style="{height: `${innerHeight}px`}">
					<view class="book-inner" id="curChapter" v-html="curChapter.text":style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`}"></view>
				</view>
			</view>
			<view class="wrap-bottom-bar">显示电量、页码</view>
		</view>
		
		<view class="wrap-container hidden">
			<view class="wrap-content-title">章节名</view>
			<view class="wrap-content">
				<view class="inner-box" :style="{height: `${innerHeight}px`}">
					<view class="book-inner" id="nextChapter" v-html="nextChapter.text":style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`}"></view>
				</view>
			</view>
			<view class="wrap-bottom-bar">
				显示电量、页码
			</view>
		</view>

		<!-- 封面 -->
		<view class="wrap-container" :class="{Backcolor1:Backcolor===1,Backcolor2:Backcolor===2,Backcolor3:Backcolor===3,Backcolor4:Backcolor===4,Backcolor5:Backcolor===5}"
			:style="{zIndex: 201, transform: `translate${cover.pageTranslate[turnType]}`, transition: `transform ${showAnimation?turnPageTime:0}s`,
			boxShadow:showShadow&&turnType===0?'0 0 10px 0 rgba(0,0,0,.4)':''}"
			@touchstart="coverTouchStart" @touchend="coverTouchEnd" @touchmove="coverTouchMove" @touchcancel="coverTouchcancel">

			<view class="wrap-header-box">
				<image :src="bookinfo.CoverUrl" class="wrap-header-image"></image>
				<view class="wrap-header-col">
					<view class="wrap-header-title">
						{{bookinfo.Title}}
					</view>
					<view class="wrap-header-text">
						都市言情<text class="wrap-header-line">│</text>{{bookinfo.isEnd==0?'连载中...':'已完结'}}
					</view>
					<view class="wrap-header-author">
						{{bookinfo.Author}}
					</view>
					<view class="wrap-header-notice">
						免费阅读请读者多多支持
					</view>
				</view>
			</view>
			<view class="wrap-should">
				<view class="wrap-should-boxs">
					<view class="wrap-should-song">
						<view class="wrap-should-text">
							<text class="wrap-should-number">{{bookinfo.Shelf}}</text>
							<text class="wrap-should-role">人</text>
							<view class="wrap-should-desc">
								加入书架
							</view>
						</view>
						<view class="wrap-should-text">
							<text class="wrap-should-number">{{bookinfo.Scribe}}</text>
							<text class="wrap-should-role">人</text>
							<view class="wrap-should-desc">
								正在阅读
							</view>
						</view>
						<view class="wrap-should-text">
							   <text class="wrap-should-socer">{{bookinfo.Score}}</text>
							   <text class="wrap-should-role">分</text>
							<view class="wrap-should-desc">
								{{bookinfo.Stars}}人评分
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="wrap-duction">
				<view class="wrap-duction-boxs">
					<view class="wrap-duction-title">
						简介
					</view>
					<view class="wrap-duction-desc">
						{{bookinfo.Briefly}}
					</view>
					
				</view>
			</view>
			
			<view class="wrap-valuation">
				<view class="wrap-valuation-boxs">	
					<view class="wrap-valuation-likes">
						<text class="wrap-valuation-title">评论</text>
						<view class="wrap-valuation-whole">
							<view class="wrap-valuation-text">
								{{bookinfo.Stars}}人评分
							</view>
							<view :data-info="bookinfo.Id" class="wrap-valuation-total"  @click="sComment">
								全部评论
							</view>
						</view>
					</view>
					<view class="wrap-complete">
						<view class="wrap-complete-boxs">
							<view class="wrap-complete-text">
								轻点评分
							</view>
							<view class="wrap-complete-stars">
								<uni-rate v-model="rateValue" margin="8" @change="onChange" />
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>


		<!-- 上一页 -->
		<view class="wrap-container" :class="{Backcolor1:Backcolor===1,Backcolor2:Backcolor===2,Backcolor3:Backcolor===3,Backcolor4:Backcolor===4,Backcolor5:Backcolor===5}"
			:style="{zIndex: 102, transform: `translate${prePage.pageTranslate[turnType]}`, transition: `transform ${showAnimation?turnPageTime:0}s`,
			boxShadow:showShadow&&turnType===0?'0 0 10px 0 rgba(0,0,0,.4)':''}">
			<view class="wrap-content-title">
				{{prePage.chapterName}}
			</view>
			<!-- 外层class="content"用于计算阅读部分的高度 -->
			<view class="wrap-content">
				<!-- 内层class="inner-box"利用innerHeight将内容截取至整行，防止文字不完整的情况出现 -->
				<view class="inner-box" :style="{height: `${innerHeight}px`}" v-if="prePage.canRead">
					<!-- 最里层class="book-inner"的用于获取文本总高度，计算总页数，注意不可以overflow:hidden -->
					<view class="book-inner" v-html="prePage.text" :style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`,color: `${colorList[background - 1]}`,transform: `translateY(-${prePage.pageNum*innerHeight}px)`}"></view>
				</view>
				<view style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;" v-else>
					付费章节
					<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
				</view>
			</view>
			<view class="wrap-bottom-bar">
				<view>{{(curChapter.chapterIndex / percentage * 100.00).toFixed(2) + '%'}}</view>
					<view class="wrap-bottom-boxs">
					<view class="wrap-bottom-date">{{systemTimeStr}}</view>
					<view><battery :level="batteryLevel" :charging="batteryState === 2"></battery></view>	
				</view>
			</view>	
		</view>
		
		<!-- 本页 -->
		<view class="wrap-container" :class="{Backcolor1:Backcolor===1,Backcolor2:Backcolor===2,Backcolor3:Backcolor===3,Backcolor4:Backcolor===4,Backcolor5:Backcolor===5}"
			:style="{zIndex: 101, transform: `translate${curPage.pageTranslate[turnType]}`, transition: `transform ${showAnimation?turnPageTime:0}s`,boxShadow:showShadow&&turnType===0?'0 0 10px 0 rgba(0,0,0,.4)':''}"
			@touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove" @touchcancel="touchcancel">
				<view class="wrap-content-title">
					{{curPage.chapterName}}
				</view>

			<view class="wrap-content">
				<view class="inner-box" :style="{height: `${innerHeight}px`}" v-if="curPage.canRead">
					<view class="book-inner" v-html="curPage.text" :style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`,color: `${colorList[background - 1]}`,transform: `translateY(-${curPage.pageNum*innerHeight}px)`}"></view>
				</view>
				<view style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;" v-else>
					付费章节
				<view style="padding: 5px 15px;background-color: #eee;" @touchstart.stop @touchmove.stop @touchend.stop="buyBook">去购买</view>
				</view>
			</view>
			<view class="wrap-bottom-bar">
				<view>{{(curChapter.chapterIndex / percentage * 100.00).toFixed(2) + '%'}}</view>
					<view class="wrap-bottom-boxs">
					<view class="wrap-bottom-date">{{systemTimeStr}}</view>
					<view><battery :level="batteryLevel" :charging="batteryState === 2"></battery></view>	
				</view>
			</view>
		</view>
		
		<!-- 下一页 -->
		<view class="wrap-container" :class="{Backcolor1:Backcolor===1,Backcolor2:Backcolor===2,Backcolor3:Backcolor===3,Backcolor4:Backcolor===4,Backcolor5:Backcolor===5}"
			:style="{zIndex: 100, transform: `translate${nextPage.pageTranslate[turnType]}`,transition: `transform ${showAnimation?turnPageTime:0}s`,
			boxShadow:showShadow&&turnType===0?'0 0 10px 0 rgba(0,0,0,.4)':''}">
			<view class="wrap-content-title">
				{{nextPage.chapterName}}
			</view>
			<view class="wrap-content">
				<view class="inner-box" :style="{height: `${innerHeight}px`}" v-if="nextPage.canRead">
					<view class="book-inner" v-html="nextPage.text" :style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight*fontSize}px`,color: `${colorList[background - 1]}`, transform: `translateY(-${nextPage.pageNum*innerHeight}px)`}"></view>
				</view>
				<view style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;" v-else>
					 付费章节
					<view style="padding: 5px 15px;background-color: #eee;">去购买</view>
				</view>
			</view>
			<view class="wrap-bottom-bar">
				<view>{{(curChapter.chapterIndex / percentage * 100.00).toFixed(2) + '%'}}</view>
					<view class="wrap-bottom-boxs">
					<view class="wrap-bottom-date">{{systemTimeStr}}</view>
					<view><battery :level="batteryLevel" :charging="batteryState === 2"></battery></view>	
				</view>
			</view>
		</view>
		
		<!-- 菜单层 -->
		<view class="wrap-tabBar" :style="{height: `100%`, width: `${windowWidth}px`}" v-if="menuShow" @touchend="closeMenu">
			<!-- 菜单层包含返回按钮的上半部分 -->
			<view class="wrap-tabBar-boxs" :style="{height: `${statusBarHeight + 40}px`, top: itemShow ? 0 : `-100%`}" @touchend.stop>
				<view :style="{height: `${statusBarHeight}px`}"></view>
				<view class="wrap-tabBar-head">
					<uni-icons type="back" size="26" class="wrap-tabBar-back" @click="sHome()"></uni-icons>
				</view>
				<view class="wrap-tabBar-title">
					{{bookinfo.Title}}
				</view>
			</view>
			
			<!-- 菜单主体 -->
			<view class="wrap-button" :style="{bottom: itemShow ? 0 : '-100%'}" @touchend.stop>
				<view class="wrap-slider">
					<text @click="checkPrevious">上一章</text>
					<view class="wrap-slider-speed">
						<slider :value="curChapter.chapterIndex" activeColor="#129d12" :block-size="20" :max="directoryList.length - 1" @changing="slideChanging" @change="slideChange"/>
					</view>
					<text @click="checkNext">下一章</text>
				</view>
				<view class="wrap-items">
					<view class="wrap-item-box" @click="openDirectory">
						<text class="iconfont" style="font-size: 20px;">&#xe8bf;</text>
						<text>目录</text>
					</view>
					<view class="wrap-item-box" v-if="Backnight ===2" @click="Backnight_click(5)">
						<text class="iconfont" style="font-size: 20px;">&#xe819;</text>
						<text>夜间</text>
					</view>
					<view class="wrap-item-box" v-if="Backnight ===5" @click="Backnight_click(2)">
						<text class="iconfont" style="font-size: 20px;">&#xe8be;</text>
						<text>白天</text>
					</view>
					<view class="wrap-item-box" v-if="Backeye ===1" @click="Backeye_click(4)">
						<text class="iconfont" style="font-size: 20px;">&#xe648;</text>
						<text>护眼</text>
					</view>
					<view class="wrap-item-box" v-if="Backeye ===4" @click="Backeye_click(1)">
						<text class="iconfont" style="font-size: 20px;">&#xe818;</text>
						<text>护眼</text>
					</view>
					<view class="wrap-item-box" @click="checksystem">
						<text class="iconfont" style="font-size: 20px;">&#xe81b;</text>
						<text>设置</text>
					</view>
				</view>
			</view>
			
			<view class="wrap-system" :style="{bottom: settingShow ? 0 : `-100%`}" @touchend.stop>
				<view class="wrap-system-item">
					<view class="Backcolor-title">排版</view>
					<view class="compose" :class="{active: lineHeight === 1}" @click="changeLineHeight(1)">
					<view class="compose-line" :class="{lineActive: lineHeight === 1}" v-for="i in 5" :key="i"></view>
					</view>
					<view class="compose" :class="{active: lineHeight === 1.5}" @click="changeLineHeight(1.5)">
					<view class="compose-line" :class="{lineActive: lineHeight === 1.5}" v-for="i in 4" :key="i"></view>
					</view>
					<view class="compose" :class="{active: lineHeight === 2}" @click="changeLineHeight(2)">
					<view class="compose-line" :class="{lineActive: lineHeight === 2}" v-for="i in 3" :key="i"></view>
					</view>
				</view>
				<view class="wrap-system-item">
					<view class="Backcolor-title">字体</view>
					<view class="bigSize" @click="bigSize" v-if="fontSize<maxFontSize">A+</view>
					<view class="bigSize" style="color: #555555; border: #55555 solid 2px;" v-else>A+</view>
					<view class="bicolor" >{{fontSize}}</view>
					<view class="bigSize" @click="smallSize" v-if="fontSize>minFontSize">A-</view>
					<view class="bigSize" style="color: #555555;border: #555555 solid 2px;" v-else>A-</view>
					<view class="bigSize" @click="changeFont(2)" v-if="simplified === 1">繁體</view>
					<view class="bigSize" @click="changeFont(1)" v-else style="border: #FF9900 solid 1px;color: #FF9900">简体</view>
				</view>
				<view class="wrap-system-item">
					<view class="Backcolor-title">背景</view>
					<view class="Backcolor" style="background-color: #f3f3f3;" :class="{active: Backcolor === 1}" @click="Backcolor_click(1)"></view>
					<view class="Backcolor" style="background-color: #dbd6c3;" :class="{active: Backcolor === 2}" @click="Backcolor_click(2)"></view>
					<view class="Backcolor" style="background-color: #d6e0ca;" :class="{active: Backcolor === 3}" @click="Backcolor_click(3)"></view>
					<view class="Backcolor" style="background-color: #cad6e0;" :class="{active: Backcolor === 4}" @click="Backcolor_click(4)"></view>
					<view class="Backcolor" style="background-color: #000000;" :class="{active: Backcolor === 5}" @click="Backcolor_click(5)"></view>
				</view>
				<view class="wrap-system-item">
					<view class="Backcolor-title">翻页</view>
					<view class="mode-icon" :class="{active: turnType === 0}" @click="changeTurnType(0)">覆盖</view>
					<view class="mode-icon" :class="{active: turnType === 1}" @click="changeTurnType(1)">左右翻页</view>
					<view class="mode-icon" :class="{active: turnType === 2}" @click="changeTurnType(2)">上下翻页</view>
				</view>
			</view>
			
			<!-- 目录 -->
			<view class="wrap-contents" :class="{Backcolor1:Backcolor===1,Backcolor2:Backcolor===2,Backcolor3:Backcolor===3,Backcolor4:Backcolor===4,Backcolor5:Backcolor===5}" v-if="directoryShowBefore"
			 :style="{left: directoryShow ? 0 : '-100%',color: `${colorList[Backcolor - 5]}`,boxShadow:'0 0 10px 0 rgba(0,0,0,.4)'}" @touchend.stop>
			 <view class="wrap-contents-boxs">
			 	<image :src="bookinfo.CoverUrl" class="wrap-contents-image"></image>
				<view class="wrap-contents-text">
					<view class="wrap-contents-title">
						{{bookinfo.Title}}
					</view>
					<view class="wrap-contents-author">
						{{bookinfo.Author}}
					</view>
				</view>
				<view class="wrap-contents-back iconfont" @tap="goToChapter(0)"><uni-icons type="right" size="22" color="#707070"></uni-icons></view>
			 </view>
			 
				<virtual-list :items="directoryList" :size="40" :remain="16" :active="curChapter.chapterIndex" :scrollHeight="windowHeight - 60">
					<template v-slot="{item,active}">
						<view class="wrap-contents-Item" :class="{active: item.index == active}" @click="goToChapter(item.index)">
							{{item.name}}
						</view>
					</template>
				</virtual-list>
			</view>
		</view>
	</view>
</template>

<script>
	import battery from '../../components/battery.vue'
	import virtualList from '../../components/virtualList.vue'
	import { traditionalized, simplized, dateToStr } from '../../utils/utils.js'
	export default {
		components:{
			battery,
			virtualList,
		},
		data() {
			return {
				bookinfo:{},
				bookName: '',
				bookId: 1,
				history: {  //本书历史记录
					chapterIndex: 0,
					progress: 0
				},
				text:``,
				rateValue: 0,
				percentage:'',
				directoryList: [],  //目录列表
				currentPage: 0,   //当前页
				
				innerHeight: 0,   //截取至整行的最大高度
				
				preChapter: {   //上一章数据
					ready: false,  //是否准备完毕
					chapterIndex: '',
					chapterName: '',
					text: '',
					totalPage: '',
					canRead: true
				},
				
				curChapter: {   //本一章数据
					chapterIndex: '',
					chapterName: '',
					text: '',
					totalPage: '',
					canRead: true
				},
				
				nextChapter: {   //下一章数据
					ready: false,  //是否准备完毕
					chapterIndex: '',
					chapterName: '',
					text: '',
					totalPage: '',
					canRead: true
				},
				
				tmpChapter: {  //暂存章节内容
					text: '',
					canRead: true
				},
				
				cover: {    //封面的状态
					pageTranslate: ['', '', ''],  //页面位移，三个数对应三种翻页方式
				},
				
				prePage: {    //上一页数据
					ready: false,  //是否准备完毕
					chapterName: '',
					text: '',
					pageNum: '',
					totalPage: 1,
					pageTranslate: ['', '', ''],  //页面位移，三个数对应三种翻页方式
					canRead: true
				},
				
				curPage: {   //本页数据
					ready: false,  //是否准备完毕
					chapterName: '',
					text: '',
					pageNum: 1,
					totalPage: 1,
					pageTranslate: ['', '', ''],  //页面位移，三个数对应三种翻页方式
					canRead: true
				},
				
				nextPage: {   //下一页数据
					ready: false,  //是否准备完毕
					chapterName: '',
					text: '',
					pageNum: '',
					totalPage: '',
					pageTranslate: ['', '', ''],  //页面位移，三个数对应三种翻页方式
					canRead: true
				},
				
				
				next: false,  //用户是否正在翻下一页
				pre: false,  //用户是否正在翻上一页
				
				waitForNext: false,  //是否正在等待下一页准备完毕后跳转
				waitForPre: false,  //是否正在等待上一页准备完毕后跳转
				waitForNextChapter: false,  //是否正在等待下一章准备完毕后跳转
				waitForPreChapter: false,  //是否正在等待上一章准备完毕后跳转
				
				showAnimation: false, //是否开启动画
				showShadow: false, //是否显示页面阴影
				
				windowWidth: 0,   //可用屏幕宽度
				windowHeight: 0,   //可用屏幕高度
				contentHeight: 0,  //阅读区域高度
				
				platform: '',  //设备
				batteryState: '', //电池状态
				batteryLevel: 100, //电量
				systemTime: '',   //系统时间
				systemTimeStr: '',   //系统时间字符串
				statusBarHeight: 0, //状态栏高度
				pixelRatio: '',    //设备像素比
				
				touchStartX: 0,  // 触屏起始点x
				touchX: 0,  // 瞬时触屏点x
				delta: 0,  // 手指瞬时位移
				
				touchStartY: 0,  // 触屏起始点y
				touchY: 0,  // 瞬时触屏点y
				
				Backcolor:'',//背景
				Backnight:'',//白天黑夜
				Backeye:'',//护眼
				menuShow: false,  //菜单栏box是否渲染
				itemShow: false,  // 菜单栏动画控制
				settingShow: false,  //设置栏动画控制
				directoryShow: false,  //目录动画控制
				directoryShowBefore: false,  // 目录渲染
				turnPageTime: .5,  //翻页动画时间
				
				maxFontSize: 30,   //最大字体大小，px
				minFontSize: 14,   //最小字体大小，px
				turnType: 0,  //翻页方式
				fontSize: '',   //字体大小，
				simplified: '',   //是否简体
				lineHeight: '',   //行高，注意是fontSize的倍数
				background: '',    //背景
				colorList: ['#5d4827', '#666'],   //与背景对应的字体颜色

				chapterProgress: 0,   //‘章节进度条’的参数
				progressTouched: false   //是否正在点击‘章节进度条’
				
			}
		},
		onLoad() {
			this.bookinfo = uni.getStorageSync('bookinfo')||[];
		    this.getSystemInfo()
		},
		onUnload() {
			// #ifdef APP-PLUS
				// 退出全屏
				plus.navigator.setFullscreen(false)
			// #endif
			this.setStorage()
		},
		onHide() {
			this.setStorage()
		},
		mounted() {
			this.initPage()
		},
		computed:{
			progress() {      //章节的阅读进度
				if (this.curChapter.totalPage === 1) {
					return 0
				}
				return this.currentPage / (this.curChapter.totalPage - 1)
			}
		},
		
		methods: {
			setStorage() {
				let history = uni.getStorageSync('history')
				if (typeof history !== 'object') {
					history = []
				}
				let have = false
				history.forEach((value) => {
					if (value.bookId === this.bookId) {
						have = true
						value.chapterIndex = this.curChapter.chapterIndex
						value.progress = this.progress
					}
				})
				if (!have) {
					history.push({
						bookId: this.bookId,
						chapterIndex: this.curChapter.chapterIndex,
						progress: this.progress
					})
				}
				uni.setStorageSync('history', history)
			},
			
			
			// 返回首页
			sHome(){
				uni.navigateTo({
					url:'index'
				})
			},
			
			sComment(prams){
				var info = prams.currentTarget.dataset.info;
				uni.navigateTo({
					url:'/views/comment/index?info=' + info
				})
			},
			
			onChange(msg){
				/*stars是点击+1人数   total是点击星数分  score是平均分*/
				var stars = parseInt(this.bookinfo.Stars) + 1;
				var total  = msg.value * 2 + parseInt(this.bookinfo.Total);
				var score = total / stars;
				uni.request({
					url: this.ServerUrl + 'index/starsTotal',
					method: 'GET',
					data: {
						id:this.bookinfo.Id,
						stars:stars,
						total:total,
						score:score,
					},
				});
			},
			
			//获取设备信息
			getSystemInfo() {
				const { windowWidth, windowHeight, statusBarHeight, platform, pixelRatio } = uni.getSystemInfoSync()
				//获取一些必要的设备参数
				this.statusBarHeight = statusBarHeight
				this.windowWidth = windowWidth
				this.windowHeight = windowHeight
				this.pixelRatio = pixelRatio
				this.platform = platform
				// #ifdef APP-PLUS
					// 全屏
					plus.navigator.setFullscreen(true)
					// 取消ios左滑返回
					let page = this.$mp.page.$getAppWebview()
					page.setStyle({ popGesture: 'none' })
					
					if (this.platform === 'ios') {
						// 获取ios电量
						let UIDevice = plus.ios.import("UIDevice")
						let dev = UIDevice.currentDevice()
						if (!dev.isBatteryMonitoringEnabled()) {  
						    dev.setBatteryMonitoringEnabled(true) 
						}
						setInterval(() => {
							this.batteryState = dev.batteryState()
							this.batteryLevel = dev.batteryLevel() * 100
						}, 1000)
						
					}
					else {
						// 获取安卓电量
						let main = plus.android.runtimeMainActivity();
						let Intent = plus.android.importClass('android.content.Intent');  
						let recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {  
						    onReceive: (context, intent) => {  
						        let action = intent.getAction();  
						        if (action == Intent.ACTION_BATTERY_CHANGED) {  
						            this.batteryState = intent.getIntExtra("status", 0); //电池状态  
									this.batteryLevel = intent.getIntExtra("level", 0); //电量
						        }  
						    }  
						 });  
						let IntentFilter = plus.android.importClass('android.content.IntentFilter');  
						let filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);  
						main.registerReceiver(recevier, filter); 
					}
					
				// #endif
				
	// 设置时间
	let date = new Date();
		this.systemTime = Date.parse(date);
		this.systemTimeStr = dateToStr(this.systemTime);
		setInterval(() => {
		this.systemTime += 60000;
		this.systemTimeStr = dateToStr(this.systemTime);
	}, 60000)
				
	// 获取字体、排版等信息
	this.fontSize = uni.getStorageSync('fontSize')
	if (typeof this.fontSize !== 'number') {
	           this.fontSize = 20
	}
	this.simplified = uni.getStorageSync('simplified')
	if (typeof this.simplified !== 'number') {
				this.simplified = 1
    }
	this.lineHeight = uni.getStorageSync('lineHeight')
	if (typeof this.lineHeight !== 'number') {
				this.lineHeight = 2
	}
	this.Backcolor = uni.getStorageSync('Backcolor')
	if (typeof this.Backcolor !== 'number') {
			    this.Backcolor = 2
	}
	this.Backnight = uni.getStorageSync('Backnight')
	if (typeof this.Backnight !== 'number') {
			    this.Backnight = 2
	}
	this.Backeye = uni.getStorageSync('Backeye')
	if (typeof this.Backeye !== 'number') {
			    this.Backeye = 1
	}
	
	this.turnType = uni.getStorageSync('turnType')
	if (typeof this.turnType !== 'number') {
				this.turnType = 0
	}
	let history = uni.getStorageSync('history')
	if (typeof history !== 'object') {
				history = []
	}
	history.forEach((value) => {
	if (value.bookId === this.bookId) {
				this.history = value
	}
  })
},
			
			/* 获取数据并计算页面*/
			async initPage() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.cover.pageTranslate = [`(${-this.windowWidth}px,0)`,`(${-this.windowWidth}px,0)`,`(0,${-this.windowHeight}px)`]
				await this.calcHeight()
				await this.getDirectoryList()
				
				if (this.history.chapterIndex > this.directoryList.length - 1 || !this.history.chapterIndex) {
					this.history.chapterIndex = 0
				}
				await this.getThreeChapter(this.history.chapterIndex)
				let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
				this.goToPage(page)
				uni.hideLoading()
				
			},
			
			/**计算innerHeight，用于截取至整行**/
			calcHeight() {
				if (this.contentHeight) {
					let lineHeight = this.fontSize * this.lineHeight;
					// #ifdef APP-PLUS || MP-WEIXIN
						lineHeight = Math.floor(lineHeight*this.pixelRatio)/this.pixelRatio
					// #endif
					let lineNum = Math.floor((this.contentHeight + Math.floor((lineHeight - this.fontSize)/2)) / lineHeight)
					this.innerHeight = lineNum * lineHeight
				}
				else {
					return new Promise((resolve, reject) => {
						this.$nextTick(() => {
							const query = uni.createSelectorQuery().in(this);
							query.select('#content').boundingClientRect(data => {
								let height = data.height;
								this.contentHeight = height;
								let lineHeight = this.fontSize * this.lineHeight;
								
								// #ifdef APP-PLUS || MP-WEIXIN
									lineHeight = Math.floor(lineHeight*this.pixelRatio)/this.pixelRatio
								// #endif
								let lineNum = Math.floor((height + Math.floor((lineHeight - this.fontSize)/2)) / lineHeight)
								this.innerHeight = lineNum * lineHeight
								resolve()
							}).exec();
						})
						
					})
				}
				
			},
			
			/**计算本章页数**/
			calcCurChapter() {
				return new Promise((resolve, reject) => {
					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#curChapter').boundingClientRect(data => {
							let height = data.height;
							// #ifdef APP-PLUS || MP-WEIXIN
							
								height = Math.round(height*this.pixelRatio)/this.pixelRatio
							// #endif
							this.curChapter.totalPage = Math.ceil(height/this.innerHeight) || 1
							this.curChapter.ready = true   //章节准备完毕
							resolve()
						}).exec();
					}, 100)
					
				})
			},
			
			/** 计算上一章页数,并翻页（如果有）**/
			calcPreChapter() {
				return new Promise((resolve, reject) => {
					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#preChapter').boundingClientRect(data => {
							let height = data.height;
							// #ifdef APP-PLUS || MP-WEIXIN
								height = Math.round(height*this.pixelRatio)/this.pixelRatio
							// #endif
							this.preChapter.totalPage = Math.ceil(height/this.innerHeight) || 1
							this.preChapter.ready = true   //章节准备完毕
							if (this.waitForPre) {    //发生在用户翻至上一章，但是上一章数据未准备完毕时
								uni.hideLoading()   //把loading关掉
								this.waitForPre = false;
								//页面准备完毕
								this.goPrePage()
							}
							if (this.waitForPreChapter) {
								uni.hideLoading()
								this.waitForPreChapter = false
								this.goPreChapter()
							}
							resolve()
						}).exec();
					},100)
					
				})
				
			},
			
			/** 计算下一章页数,并翻页（如果有）**/
			calcNextChapter() {
				return new Promise((resolve, reject) => {
					// 此处setTimeout 100ms是为了确保元素渲染完毕从而获取正确高度，如果遇到页面页数计算不正确的情况可以增加时间试试看
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#nextChapter').boundingClientRect(data => {
							let height = data.height;
							// #ifdef APP-PLUS || MP-WEIXIN
								height = Math.round(height*this.pixelRatio)/this.pixelRatio
							// #endif
							this.nextChapter.totalPage = Math.ceil(height/this.innerHeight) || 1
							this.nextChapter.ready = true   //章节准备完毕
							if (this.waitForNext) {   //发生在用户翻至下一章，但是下一章数据未准备完毕时
								uni.hideLoading()    //把loading关掉
								this.waitForNext = false;
								//页面准备完毕
								this.goNextPage()
							}
							if (this.waitForNextChapter) {
								uni.hideLoading()
								this.waitForNextChapter = false
								this.goNextChapter()
							}
							resolve()
						}).exec();
						
					},100)
					
				})
				
			},
			
			/**
			* 触摸开始（封面）
			**/
			coverTouchStart(e) {
				this.showAnimation = false    //关掉动画，否则翻页会很慢
				this.touchX = e.touches[0].clientX
				this.touchStartX = e.touches[0].clientX
				this.touchY = e.touches[0].clientY
				this.touchStartY = e.touches[0].clientY
			},
			
			/**
			* 触摸（封面）
			**/
			coverTouchMove(e) {
				this.showShadow = true
				let delta = 0
				if (this.turnType === 0 || this.turnType === 1) {  //翻页方式为‘覆盖’或者‘左右平移’
					delta = e.touches[0].clientX - this.touchStartX;
					
					// 限制边界
					if (delta>this.windowWidth) {
						delta = this.windowWidth
					}
					if (delta<-this.windowWidth) {
						delta = -this.windowWidth
					}
					
					this.delta = e.touches[0].clientX - this.touchX;
					this.touchX = e.touches[0].clientX;
				}
				else {	//翻页方式为‘上下平移’
					delta = e.touches[0].clientY - this.touchStartY;
					
					// 限制边界
					if (delta>this.windowHeight) {
						delta = this.windowHeight
					}
					if (delta<-this.windowHeight) {
						delta = -this.windowHeight
					}
					
					this.delta = e.touches[0].clientY - this.touchY;
					this.touchY = e.touches[0].clientY;
				}
				
				if (this.next) {   //首次翻下一页之后
				
					// 限制边界
					if (delta>0) {
						delta = 0
					}
					
					this.cover.pageTranslate = [
						`(${delta}px,0)`,
						`(${delta}px,0)`,
						`(0,${delta}px)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth + delta}px,0)`,
						`(0,${this.windowHeight + delta}px)`
					]
				}
				if (!this.pre && !this.next && delta < 0) {  //首次翻下一页
					this.next = true
					this.cover.pageTranslate = [
						`(${delta}px,0)`,
						`(${delta}px,0)`,
						`(0,${delta}px)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth + delta}px,0)`,
						`(0,${this.windowHeight + delta}px,)`
					]
				}
				if (this.pre) {   //首次右滑后，由于是封面不做任何操作
					return
				}
				if (!this.pre && !this.next && delta > 0) {  //首次右滑
					this.pre = true
					uni.showToast({
						title: '已经是第一页了',
						icon: 'none'
					})
				}
			},
			
			/**触摸结束（封面）**/
			coverTouchEnd(e) {
				this.showAnimation = true
				this.showShadow = false
				let delta = 0
				if (this.turnType === 0 || this.turnType === 1) {  //翻页方式为‘覆盖’或者‘左右平移’
					delta = e.changedTouches[0].clientX - this.touchStartX;
				}
				else {   //翻页方式为‘上下平移’
					delta = e.changedTouches[0].clientY - this.touchStartY;
				}
				if (delta === 0) {
					if (e.changedTouches[0].clientX<this.windowWidth/3) { //点击屏幕左1/3为上一页
						uni.showToast({
							title: '已经是第一页了',
							icon: 'none'
						})
					}
					else if (e.changedTouches[0].clientX>this.windowWidth/3*2) { //点击屏幕右1/3为下一页
						this.cover.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]
					}
					else if (e.changedTouches[0].clientX<=this.windowWidth/3*2 && e.changedTouches[0].clientX>=this.windowWidth/3) { //点击屏幕中间1/3为呼出菜单
						this.showMenu()
					}
				}
				else {
					if (this.next && this.delta <= 0) {  //下一页
						this.cover.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]
					}
					else if (this.next && this.delta > 0) {  //取消翻页
						this.cover.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth}px,0)`,
							`(0,${this.windowHeight}px)`
						]
					}
				}
				this.next = false
				this.pre = false
				
			},
			
			/** 触摸取消（封面）**/
			coverTouchcancel() {
				
				// 取消翻页
				this.showAnimation = false
				this.showShadow = false
				this.cover.pageTranslate = [
					`(0,0)`,
					`(0,0)`,
					`(0,0)`
				]
				this.curPage.pageTranslate = [
					`(0,0)`,
					`(${this.windowWidth}px,0)`,
					`(0,${this.windowHeight}px)`
				]
				this.next = false
				this.pre = false
			},
			
			/**
			* 触摸开始
			**/
			touchStart(e) {
				this.showAnimation = false
				this.touchX = e.touches[0].clientX;
				this.touchStartX = e.touches[0].clientX;
				this.touchY = e.touches[0].clientY;
				this.touchStartY = e.touches[0].clientY;
			},
			
			// 触摸
			touchMove(e) {
				this.showShadow = true;
				let delta = 0
				if (this.turnType === 0 || this.turnType === 1) {  //翻页方式为‘覆盖’或者‘左右平移’
					delta = e.touches[0].clientX - this.touchStartX;
					
					// 限制边界
					if (delta>this.windowWidth) {
						delta = this.windowWidth
					}
					if (delta<-this.windowWidth) {
						delta = -this.windowWidth
					}
					
					this.delta = e.touches[0].clientX - this.touchX;
					this.touchX = e.touches[0].clientX;
				}
				else {	//翻页方式为‘上下平移’
					delta = e.touches[0].clientY - this.touchStartY;
					
					// 限制边界
					if (delta>this.windowHeight) {
						delta = this.windowHeight
					}
					if (delta<-this.windowHeight) {
						delta = -this.windowHeight
					}
					
					this.delta = e.touches[0].clientY - this.touchY;
					this.touchY = e.touches[0].clientY;
				}
				
				if (this.next && this.nextPage.ready) {   //首次翻下一页之后
					if (this.nextPage.isEnd) {
						return
					}
					
					// 限制边界
					if (delta>0) {
						delta = 0
					}
					
					this.prePage.pageTranslate = [
						`(${-this.windowWidth}px,0)`,
						`(${-this.windowWidth+delta}px,0)`,
						`(0,${-this.windowHeight+delta}px)`
					]
					this.curPage.pageTranslate = [
						`(${delta}px,0)`,
						`(${delta}px,0)`,
						`(0,${delta}px)`
					]
					this.nextPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth+delta}px,0)`,
						`(0,${this.windowHeight+delta}px)`
					]
				}
				if (!this.pre && !this.next && delta < 0) {  //首次翻下一页
					this.next = true
					if (this.nextPage.ready) {  //页面准备好了
						if (this.nextPage.isEnd) {
							
							
							/*****************************************/
							/**********    根据需要更改    ************/
							/*****************************************/
							uni.showToast({
								title:'跳转推荐页',
								icon:'none'
							})
							/*****************************************/
							/*****************************************/
							/*****************************************/
							
							
						}
						else {
							this.prePage.pageTranslate = [
								`(${-this.windowWidth}px,0)`,
								`(${-this.windowWidth+delta}px,0)`,
								`(0,${-this.windowHeight+delta}px)`
							]
							this.curPage.pageTranslate = [
								`(${delta}px,0)`,
								`(${delta}px,0)`,
								`(0,${delta}px)`
							]
							this.nextPage.pageTranslate = [
								`(0,0)`,
								`(${this.windowWidth+delta}px,0)`,
								`(0,${this.windowHeight+delta}px)`
							]
						}
					}
					else if (this.nextChapter.ready) {  //下一章已经准备好了
						this.nextPage = {
							ready: this.nextChapter.ready,
							chapterName: this.nextChapter.chapterName,
							text: this.nextChapter.text,
							pageNum: 0,
							totalPage: this.nextChapter.totalPage,
							pageTranslate: [
								`(0,0)`,
								`(${this.windowWidth}px,0)`,
								`(0,${this.windowHeight}px)`
							],
							canRead: this.nextChapter.canRead
						}
						this.prePage.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth+delta}px,0)`,
							`(0,${-this.windowHeight+delta}px)`
						]
						this.curPage.pageTranslate = [
							`(${delta}px,0)`,
							`(${delta}px,0)`,
							`(0,${delta}px)`
						]
						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth+delta}px,0)`,
							`(0,${this.windowHeight+delta}px)`
						]
					}
				}
				if (this.pre && this.prePage.ready) {   //首次翻上一页之后
					
					// 限制边界
					if (delta<0) {
						delta = 0
					}
					
					if (this.prePage.isCover) {  //上一页是封面
						this.cover.pageTranslate = [
							`(${-this.windowWidth+delta}px,0)`,
							`(${-this.windowWidth+delta}px,0)`,
							`(0,${-this.windowHeight+delta}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(${delta}px,0)`,
							`(0,${delta}px)`
						]
					}
					else {
						this.prePage.pageTranslate = [
							`(${-this.windowWidth+delta}px,0)`,
							`(${-this.windowWidth+delta}px,0)`,
							`(0,${-this.windowHeight+delta}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(${delta}px,0)`,
							`(0,${delta}px)`
						]
						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth+delta}px,0)`,
							`(0,${this.windowHeight+delta}px)`
						]
					}
				}
				if (!this.pre && !this.next && delta > 0) {  //首次翻上一页
					this.pre = true
					if (this.prePage.ready) {  //页面准备好了
						if (this.prePage.isCover) {  //上一页是封面
							this.cover.pageTranslate = [
								`(${-this.windowWidth+delta}px,0)`,
								`(${-this.windowWidth+delta}px,0)`,
								`(0,${-this.windowHeight+delta}px)`
							]
							this.curPage.pageTranslate = [
								`(0,0)`,
								`(${delta}px,0)`,
								`(0,${delta}px)`
							]
						}
						else {
							this.prePage.pageTranslate = [
								`(${-this.windowWidth+delta}px,0)`,
								`(${-this.windowWidth+delta}px,0)`,
								`(0,${-this.windowHeight+delta}px)`
							]
							this.curPage.pageTranslate = [
								`(0,0)`,
								`(${delta}px,0)`,
								`(0,${delta}px)`
							]
							this.nextPage.pageTranslate = [
								`(0,0)`,
								`(${this.windowWidth+delta}px,0)`,
								`(0,${this.windowHeight+delta}px)`
							]
						}
					}
					else if (this.preChapter.ready) {  //上一章已经准备好了
						this.prePage = {
							ready: this.preChapter.ready,
							chapterName: this.preChapter.chapterName,
							text: this.preChapter.text,
							pageNum: this.preChapter.totalPage - 1,
							totalPage: this.preChapter.totalPage,
							pageTranslate: [
								`(${-this.windowWidth}px,0)`,
								`(${-this.windowWidth}px,0)`,
								`(0,${-this.windowHeight}px)`
							],
							canRead: this.preChapter.canRead
						}
						this.prePage.pageTranslate = [
							`(${-this.windowWidth+delta}px,0)`,
							`(${-this.windowWidth+delta}px,0)`,
							`(0,${-this.windowHeight+delta}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(${delta}px,0)`,
							`(0,${delta}px)`
						]
						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth+delta}px,0)`,
							`(0,${this.windowHeight+delta}px)`
						]
					}
				}
				
			},
			
			//触摸结束
			touchEnd(e) {
				this.showAnimation = true
				this.showShadow = false
				let delta = 0
				if (this.turnType === 0 || this.turnType === 1) {
					delta = e.changedTouches[0].clientX - this.touchStartX;
				}
				else {
					delta = e.changedTouches[0].clientY - this.touchStartY;
				}
				if (delta < 0.8 && delta > -0.8) {   //部分手机点击屏幕时无法做到delta===0
					if (e.changedTouches[0].clientX<this.windowWidth/3) { //点击屏幕左1/3为上一页
						this.goPrePage()
					}
					else if (e.changedTouches[0].clientX>this.windowWidth/3*2) { //点击屏幕右1/3为下一页
						this.goNextPage()
					}
					else if (e.changedTouches[0].clientX<=this.windowWidth/3*2 && e.changedTouches[0].clientX>=this.windowWidth/3) { //点击屏幕中间1/3为呼出菜单
						this.showMenu()
					}
				}
				else {
					if (this.next && this.delta <= 0) {  //下一页
						this.goNextPage()
					}
					else if (this.next && this.delta > 0) {  //取消翻页
						this.prePage.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]
						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth}px,0)`,
							`(0,${this.windowHeight}px)`
						]
					}
					else if (this.pre && this.delta >= 0) {  //上一页
						this.goPrePage()
					}
					else if (this.pre && this.delta < 0) {  //取消翻页
						this.prePage.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
						this.curPage.pageTranslate = [
							`(0,0)`,
							`(0,0)`,
							`(0,0)`
						]
						this.nextPage.pageTranslate = [
							`(0,0)`,
							`(${this.windowWidth}px,0)`,
							`(0,${this.windowHeight}px)`
						]
						this.cover.pageTranslate = [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						]
					}
				}
				this.next = false
				this.pre = false
				
			},
			
			// 取消触摸
			touchcancel() {
				
				//取消翻页,重置页面
				this.showAnimation = false
				this.showShadow = false
				this.prePage.pageTranslate = [
					`(${-this.windowWidth}px,0)`,
					`(${-this.windowWidth}px,0)`,
					`(0,${-this.windowHeight}px)`
				]
				this.curPage.pageTranslate = [
					`(0,0)`,
					`(0,0)`,
					`(0,0)`
				]
				this.nextPage.pageTranslate = [
					`(0,0)`,
					`(${this.windowWidth}px,0)`,
					`(0,${this.windowHeight}px)`
				]
				this.cover.pageTranslate = [
					`(${-this.windowWidth}px,0)`,
					`(${-this.windowWidth}px,0)`,
					`(0,${-this.windowHeight}px)`
				]
				this.next = false
				this.pre = false
			},
			
			// 呼出菜单
			showMenu() {
				// #ifdef APP-PLUS
			       plus.navigator.setFullscreen(false);
				// #endif
				this.menuShow = true;
				setTimeout(() => {
					this.itemShow = true
				},100)
			},
			
			//关闭菜单
			closeMenu() {
				// #ifdef APP-PLUS
					plus.navigator.setFullscreen(true);
				// #endif
				this.itemShow = false
				this.settingShow = false
				this.directoryShow = false
				setTimeout(() => {
					this.directoryShowBefore = false
					this.menuShow = false
				},300)
			},
			
			// 关闭菜单栏，呼出设置栏
			checksystem() {
				this.itemShow = false
				setTimeout(() => {
					this.settingShow = true
				},300)
			},
			
			//关闭菜单栏，呼出目录栏
			openDirectory() {
				// #ifdef APP-PLUS
					plus.navigator.setFullscreen(true);
				// #endif
				this.itemShow = false
				this.directoryShowBefore = true
				setTimeout(() => {
					this.directoryShow = true
				},300)
			},
			
			//拖动进度条
			slideChanging(e){
				this.progressTouched = true
				this.chapterProgress = e.detail.value
			},
			
			// 结束拖动进度条
			async slideChange(e) {
				
				this.chapterProgress = e.detail.value
				uni.showLoading({
					title: '加载中'
				})
				await this.getThreeChapter(e.detail.value)
				this.progressTouched = false
				this.goToPage(0)
				uni.hideLoading()
				
			},
			
			//上一页,页面轮换
			goPrePage() {
				
				if (this.prePage.isCover) {   //如果是首页
					this.cover.pageTranslate = [
						`(0,0)`,
						`(0,0)`,
						`(0,0)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth}px,0)`,
						`(0,${this.windowHeight}px)`
					]
					return 
				}
				if (!this.prePage.ready && !this.preChapter.ready) {
					this.waitForPre = true
					uni.showLoading({
						title: '正在准备上一章',
						mask: true
					})
					return
				}
				let showChapter = false
				this.currentPage -= 1
				if (this.currentPage === -1) {   //翻至上一章了
					showChapter = true
					this.currentPage = this.preChapter.totalPage - 1
					this.chapterRotate('pre')
				}
				
				let cur = [].concat(this.curPage.pageTranslate)
				let pre = [].concat(this.prePage.pageTranslate)
				this.goToPage(this.currentPage)
				this.prePage.pageTranslate = [
					`(${-this.windowWidth}px,0)`,
					`(${-this.windowWidth}px,0)`,
					`(0,${-this.windowHeight}px)`
				]
				this.curPage.pageTranslate = pre
				this.nextPage.pageTranslate = cur
				setTimeout(()=> {
					if (showChapter) {
						uni.showToast({
							title: this.curChapter.chapterName,
							icon: 'none'
						})
					}
					this.showAnimation = true
					this.prePage.pageTranslate = [
						`(${-this.windowWidth}px,0)`,
						`(${-this.windowWidth}px,0)`,
						`(0,${-this.windowHeight}px)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(0,0)`,
						`(0,0)`
					]
					this.nextPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth}px,0)`,
						`(0,${this.windowHeight}px)`
					]
				},50)
			},
			
			
			/**
			* 下一页,页面轮换
			**/
			goNextPage() {
				if (this.nextPage.isEnd) {   //如果翻至本书末尾
				
					/*****************************************/
					/**********    根据需要更改    ************/
					/*****************************************/
					uni.showToast({						title:'跳转推荐页',						icon:'none'					})
					/*****************************************/
					/*****************************************/
					/*****************************************/
					return 
				}
				if (!this.nextPage.ready && !this.nextChapter.ready) {
					this.waitForNext = true
					uni.showLoading({
						title: '正在准备下一章',
						mask: true
					})
					return
				}
				this.currentPage += 1
				let showChapter = false
				if (this.currentPage === this.curChapter.totalPage) {   //翻至下一章了
					showChapter = true
					this.currentPage = 0
					this.chapterRotate('next')
				}
				
				let cur = [].concat(this.curPage.pageTranslate)
				let next = [].concat(this.nextPage.pageTranslate)
				this.goToPage(this.currentPage)
				this.prePage.pageTranslate = cur
				this.curPage.pageTranslate = next
				this.nextPage.pageTranslate = [
					`(0,0)`,
					`(${this.windowWidth}px,0)`,
					`(0,${this.windowHeight}px)`
				]
				setTimeout(()=> {
					if (showChapter) {
						uni.showToast({
							title: this.curChapter.chapterName,
							icon: 'none'
						})
					}
					this.showAnimation = true
					this.prePage.pageTranslate = [
						`(${-this.windowWidth}px,0)`,
						`(${-this.windowWidth}px,0)`,
						`(0,${-this.windowHeight}px)`
					]
					this.curPage.pageTranslate = [
						`(0,0)`,
						`(0,0)`,
						`(0,0)`
					]
					this.nextPage.pageTranslate = [
						`(0,0)`,
						`(${this.windowWidth}px,0)`,
						`(0,${this.windowHeight}px)`
					]
				},50)
			},
			
			//章节轮换
			async chapterRotate(type) {
				if (type === 'next') {
					this.preChapter = Object.assign({}, this.curChapter)
					this.curChapter = Object.assign({}, this.nextChapter)
					if (this.curChapter.chapterIndex !== this.directoryList.length - 1) {//最后一章是根据目录列表长度判断
						this.nextChapter = {
							ready: false,
							chapterIndex: this.curChapter.chapterIndex + 1,
							chapterName: this.directoryList[this.curChapter.chapterIndex + 1].name,
						}
						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex + 1].chapterId)
						this.$set(this.nextChapter, 'text', this.tmpChapter.text)
						this.$set(this.nextChapter, 'canRead', this.tmpChapter.canRead)
						this.calcNextChapter()
					}
					else {
						this.nextChapter = {ready: true,isEnd: true}
					}
				}
				if (type === 'pre') {
					this.nextChapter = Object.assign({}, this.curChapter)
					this.curChapter = Object.assign({}, this.preChapter)
					if (this.curChapter.chapterIndex !== 0) {
						this.preChapter = {
							ready: false,
							chapterIndex: this.curChapter.chapterIndex - 1,
							chapterName: this.directoryList[this.curChapter.chapterIndex - 1].name,
						}
						await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex - 1].chapterId)
						this.$set(this.preChapter, 'text', this.tmpChapter.text)
						this.$set(this.preChapter, 'canRead', this.tmpChapter.canRead)
						this.calcPreChapter()
					}
					else {
						this.preChapter = {ready: true,isCover: true}
					}
				}
			},
			
			
			//导航条下一章
			checkNext() {
				if (this.curChapter.chapterIndex === this.directoryList.length - 1) {
					uni.showToast({
						title: '已经是最后一章了',
						icon: 'none'
					})
					return
				}
				if (this.waitForNext || this.waitForPre) {
					return 
				}
				if (this.nextChapter.ready) {
					this.chapterRotate('next')
					this.goToPage(0)
				}
				else {
					uni.showLoading({
						title: '正在准备下一章'
					})
					this.waitForNextChapter = true
				}
			},
			
			//导航条上一章
			checkPrevious(page) {
				if (this.curChapter.chapterIndex === 0) {
					uni.showToast({
						title: '这是第一章',
						icon: 'none'
					})
					return
				}
				if (this.waitForNext || this.waitForPre) {
					return 
				}
				if (this.preChapter.ready) {
					this.chapterRotate('pre')
					this.goToPage(0)
				}
				else {
					uni.showLoading({
						title: '正在准备上一章'
					})
					this.waitForPreChapter = true
				}
			},
			
			
			/**
			* 根据页码跳转
			**/
			goToPage(page) {
				
				this.currentPage = page
				this.showAnimation = false
				this.curPage = {
					ready: this.curChapter.ready,
					chapterName: this.curChapter.chapterName,
					text: this.curChapter.text,
					pageNum: this.currentPage,
					totalPage: this.curChapter.totalPage,
					pageTranslate: [
						`(0,0)`,
						`(0,0)`,
						`(0,0)`
					],
					canRead: this.curChapter.canRead
				}
				if (this.currentPage === 0) {
					if (this.preChapter.ready && this.preChapter.isCover) {    //翻至封面了
						this.prePage = {
							ready: true,
							isCover: true,
							pageTranslate: [
								`(${-this.windowWidth}px,0)`,
								`(${-this.windowWidth}px,0)`,
								`(0,${-this.windowHeight}px)`
							]
						}
					}
					else {
						this.prePage = {
							ready: this.preChapter.ready,
							chapterName: this.preChapter.chapterName,
							text: this.preChapter.text,
							pageNum: this.preChapter.totalPage - 1,
							totalPage: this.preChapter.totalPage,
							pageTranslate: [
								`(${-this.windowWidth}px,0)`,
								`(${-this.windowWidth}px,0)`,
								`(0,${-this.windowHeight}px)`
							],
							canRead: this.preChapter.canRead
						}
					}
				}
				else {
					this.prePage = {
						ready: true,
						chapterName: this.curChapter.chapterName,
						text: this.curChapter.text,
						pageNum: this.currentPage - 1,
						totalPage: this.curChapter.totalPage,
						pageTranslate: [
							`(${-this.windowWidth}px,0)`,
							`(${-this.windowWidth}px,0)`,
							`(0,${-this.windowHeight}px)`
						],
						canRead: this.curChapter.canRead
					}
				}
				if (this.currentPage >= this.curChapter.totalPage - 1) {
					if (this.nextChapter.ready && this.nextChapter.isEnd) {    //翻至最后一章了
						this.nextPage = {
							ready: true,
							isEnd: true,
							pageTranslate: [
								`(0,0)`,
								`(${this.windowWidth}px,0)`,
								`(0,${this.windowHeight}px)`
							]
						}
					}
					else {
						this.nextPage = {
							ready: this.nextChapter.ready,
							chapterName: this.nextChapter.chapterName,
							text: this.nextChapter.text,
							pageNum: 0,
							totalPage: this.nextChapter.totalPage,
							pageTranslate: [
								`(0,0)`,
								`(${this.windowWidth}px,0)`,
								`(0,${this.windowHeight}px)`
							],
							canRead: this.nextChapter.canRead
						}
					}
				}
				else {
					this.nextPage = {
						ready: true,
						chapterName: this.curChapter.chapterName,
						text: this.curChapter.text,
						pageNum: this.currentPage + 1,
						totalPage: this.curChapter.totalPage,
						pageTranslate: [
							`(0,0)`,
							`(${this.windowWidth}px,0)`,
							`(0,${this.windowHeight}px)`
						],
						canRead: this.curChapter.canRead
					}
				}
			},
			
			//跳转到指定章节
			async goToChapter(index) {
				this.progressTouched = false
				this.closeMenu()
				uni.showLoading({
					title: '加载中'
				})
				await this.getThreeChapter(index)
				this.goToPage(0)
				uni.hideLoading()
			},
			
			//加大字体
			async bigSize() {
				let progress = this.progress   //记录阅读进度用于调整字体后跳转
				this.fontSize +=2
				uni.setStorageSync('fontSize', this.fontSize)
				this.calcHeight()
				await this.calcCurChapter()
				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
				this.goToPage(page)
				if (this.preChapter.ready && !this.preChapter.isCover) {
					this.preChapter.ready = false
					await this.calcPreChapter()
				}
				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
					this.nextChapter.ready = false
					await this.calcNextChapter()
				}
			},
			
			// 缩小字体
			async smallSize() {
				let progress = this.progress
				this.fontSize -= 2
				uni.setStorageSync('fontSize', this.fontSize)
				this.calcHeight()
				await this.calcCurChapter()
				let page = Math.floor((this.curChapter.totalPage - 1) * progress)
				this.goToPage(page)
				if (this.preChapter.ready && !this.preChapter.isCover) {
					this.preChapter.ready = false
					await this.calcPreChapter()
				}
				if (this.nextChapter.ready && !this.nextChapter.isEnd) {
					this.nextChapter.ready = false
					await this.calcNextChapter()
				}
				
			},
			
			//切换繁体简体
			changeFont(type) {
				if (type === 2) {   //切换为繁体
					this.preChapter.text = traditionalized(this.preChapter.text)
					this.curChapter.text = traditionalized(this.curChapter.text)
					this.nextChapter.text = traditionalized(this.nextChapter.text)
					this.prePage.text = traditionalized(this.prePage.text)
					this.curPage.text = traditionalized(this.curPage.text)
					this.nextPage.text = traditionalized(this.nextPage.text)
					this.simplified = 2
					uni.setStorageSync('simplified', 2)
				}
				else {   //切换为简体
					this.preChapter.text = simplized(this.preChapter.text)
					this.curChapter.text = simplized(this.curChapter.text)
					this.nextChapter.text = simplized(this.nextChapter.text)
					this.prePage.text = simplized(this.prePage.text)
					this.curPage.text = simplized(this.curPage.text)
					this.nextPage.text = simplized(this.nextPage.text)
					this.simplified = 1
					uni.setStorageSync('simplified', 1)
				}
			},
			
			// 改变行距 
			async changeLineHeight(lineHeight) {
				let progress = this.progress
				if (lineHeight === this.lineHeight) {
					return
				}
				else {
					this.lineHeight = lineHeight;
					uni.setStorageSync('lineHeight', this.lineHeight)
					this.calcHeight()
					await this.calcCurChapter()
					let page = Math.floor((this.curChapter.totalPage - 1) * progress)
					this.goToPage(page)
					if (this.preChapter.ready && !this.preChapter.isCover) {
						this.preChapter.ready = false
						await this.calcPreChapter()
					}
					if (this.nextChapter.ready && !this.nextChapter.isEnd) {
						this.nextChapter.ready = false
						await this.calcNextChapter()
					}
					
				}
			},
			
			
			//改变翻页方式
			changeTurnType(turnType) {
				if (turnType === this.turnType) {
					return
				}
				else {
					this.showAnimation = false
					this.turnType = turnType;
					uni.setStorageSync('turnType', this.turnType)
				}
			},
			
			
			// 背景
			Backcolor_click(Backcolor) {
				if (Backcolor === this.Backcolor) {
					return
				}
				else {
					this.Backcolor = Backcolor;
					uni.setStorageSync('Backcolor', this.Backcolor)
				}
			},
			
			// 白天黑夜
			Backnight_click(Backcolor) {
				if (Backcolor === this.Backcolor) {
					return
				}
				else {
					this.Backcolor = Backcolor;
					this.Backnight = Backcolor;
					uni.setStorageSync('Backnight', this.Backcolor)
					uni.setStorageSync('Backcolor', this.Backcolor)
				}
			},
			// 改变护眼
			Backeye_click(Backcolor) {
				if (Backcolor === this.Backcolor) {
					return
				}
				else {
					this.Backcolor = Backcolor;
					this.Backeye = Backcolor;
					uni.setStorageSync('Backeye', this.Backcolor)
					uni.setStorageSync('Backcolor', this.Backcolor)
				}
			},
			
	// 获取目录 
	getDirectoryList(showLoading) {
		if (showLoading) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
		}

		return new Promise((resolve, reject) => {
			// 加载网络时间
			setTimeout(() => {
				if (showLoading) {
				uni.hideLoading()
			}
						
			uni.request({
				url: this.ServerUrl + 'index/getbooklist',
				method: 'GET',
				data: {
					RoleID:this.bookinfo.Id
				},
				success: res => {
					if(res.data.status == 'ok'){
						this.percentage = res.data.data.length;
						for (let i=1;i<=res.data.data.length;i++) {
							this.directoryList.push({
								index: i-1,
								chapterId: i,
								name:`第${i}章 `+res.data.data[this.directoryList.length].Name 
								})
							}
						resolve()
					}
				},
			});
		}, 300)
	})
},
			
			
			// 获取文章数据 
			getOneChapter(chapterId, showLoading) {
				if (showLoading) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
				}
				
				uni.request({
					url: this.ServerUrl + 'index/getText',
					method: 'GET',
					data: {
						count:chapterId,
						RoleID:this.bookinfo.Id
					},
					success: res => {
						function escapeHtml(str){
							var arrEntities={'lt':'<','gt':'>'};
							return str.replace(/&(lt|gt);/ig,function(all,t){
								return arrEntities[t];
							});
						}
						this.text = escapeHtml(res.data.data.content);
					},
				});

				return new Promise((resolve, reject) => {
					// 模拟网络时间
					setTimeout(() => {
						if (showLoading) {
							uni.hideLoading()
						}
						
						if (chapterId < 5000) {
							this.tmpChapter.text = this.text
							
							// 根据业务实际情况判断该用户是否可阅读,逻辑后端判断
							this.tmpChapter.canRead = true
						}
						else {
							this.tmpChapter.text = ''  //注意：不能阅读章节请赋值为空字符串
							// 根据业务实际情况判断该用户是否可阅读,逻辑后端判断
							this.tmpChapter.canRead = false
						}
						if (this.simplified === 2) {   //切换为繁体  注意：这里默认数据库中是简体字
							this.tmpChapter.text = traditionalized(this.tmpChapter.text)
						}
						resolve()
					}, 300)
				})
			},
			
			
			//获取三章数据
			async getThreeChapter(index) {
				console.log("获取当前第"+index+"章数据",this.directoryList[index].chapterId);
				await this.getOneChapter(this.directoryList[index].chapterId)
				this.curChapter = {
					chapterIndex: index,
					chapterName: this.directoryList[index].name,
					text: this.tmpChapter.text,
					canRead: this.tmpChapter.canRead
				}

				if (this.curChapter.chapterIndex !== 0) {
					await this.getOneChapter(this.directoryList[index - 1].chapterId)
					this.preChapter = {
						chapterIndex: index - 1,
						chapterName: this.directoryList[index - 1].name,
						text: this.tmpChapter.text,
						canRead: this.tmpChapter.canRead
					}
				}
				else {
					this.preChapter = {ready: true,isCover: true}
				}

				if (this.curChapter.chapterIndex !== this.directoryList.length - 1) {
					await this.getOneChapter(this.directoryList[index + 1].chapterId)
					this.nextChapter = {
						chapterIndex: index + 1,
						chapterName: this.directoryList[index + 1].name,
						text: this.tmpChapter.text,
						canRead: this.tmpChapter.canRead
					}
				}
				else {
					this.nextChapter = {ready: true,isEnd: true}
				}
				await this.calcCurChapter()
				await this.calcPreChapter()
				await this.calcNextChapter()
			},
		
		// 购买书籍接口
		buyBook() {
			//在回调中调用this.initPage()刷新本页
			uni.showToast({
				title: '跳转至购买页面，如果未登陆则跳转登陆',
				icon: 'none'
			})
		}	
			
	}
}

</script>

<style lang="scss" scoped>
.wrap{height: 100%;}
.wrap-home-title{font-size: 26px;padding: 10upx 0 10upx 0;color: #550000;}
.wrap-home-image{width: 180upx;height: 240upx;border-radius: 8px;}
.wrap-home-author{font-size: 13px;color: #4b99ba;}
.wrap-home-line{font-size: 12px;padding: 0 5upx 0 5upx;color: #a1a1a1;}
.wrap-home-text{font-size: 13px;color: #7a7a7a;}

.wrap-header-box{display: flex;width: 100%;padding: 20upx;border-radius: 8upx;background: #ded9c5;}
.wrap-header-col{padding-left: 20upx;}
.wrap-header-title{font-size: 18px;color: #4d0000;}
.wrap-header-image{width: 160upx;height: 200upx;border-radius: 18upx;}
.wrap-header-text{font-size: 12px;color: #9a9a9a;height: 50upx;min-height: 50upx;padding-top: 20upx;}
.wrap-header-line{font-size: 11px;color: #ababab;padding-left: 5upx;}
.wrap-header-red{font-size: 12px;color: #74451f;padding-left: 5upx;}
.wrap-header-author{font-size: 12px;color: #9a9a9a;padding-top: 8upx;}
.wrap-header-notice{font-size: 12px;color: #ee964d;padding-top: 8upx;}

.wrap-should{display: flex;flex-direction: row;justify-content: center;margin-top: 10upx;width: 100%;}
.wrap-should-boxs{display: flex;flex-direction: column;background: #ded9c5;width: 100%;border-radius: 12upx;}
.wrap-should-song{display: flex;justify-content: space-between;padding: 20upx 30upx 5upx 20upx;}
.wrap-should-number{font-size: 18px;font-weight: bold;color: #423d33;}
.wrap-should-role{font-size: 12px;color: #423d33;padding-left: 5upx;}
.wrap-should-line{display: flex;justify-content: space-between;padding: 5upx 30upx 20upx 20upx;}
.wrap-should-desc{font-size: 12px;color: #7e7e7e;padding: 10upx 0 20upx 0;}
.wrap-should-socer{font-size: 18px;font-weight: bold;color: #c3522f;}
.wrap-should-text{font-size: 12px;padding-left: 5upx;color: #423d33;}

.wrap-duction{display: flex;flex-direction: row;justify-content: center;margin-top: 10upx;}
.wrap-duction-boxs{display: flex;flex-direction: column;background: #ded9c5;;width: 100%;border-radius: 12upx;}
.wrap-duction-title{padding: 20upx;font-size: 16px;color: #423d33;}
.wrap-duction-desc{padding: 0 20upx 30upx 20upx;font-size: 13px;height: 312upx;min-height: 312upx;color: #827865;overflow : hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 9;-webkit-box-orient: vertical;}

.wrap-valuation{display: flex;flex-direction: row;justify-content: center;margin-top: 10upx;width: 100%;}
.wrap-valuation-boxs{display: flex;flex-direction: column;background: #ded9c5;width: 100%;border-radius: 12upx;}
.wrap-valuation-likes{display: flex;flex-direction: row; margin-left: 20upx;margin-bottom: 20upx;width: 95%;}
.wrap-valuation-title{margin-top: 20upx;font-size: 16px;color: #423d33;}
.wrap-valuation-give{display: flex;flex-direction: row;justify-content: space-between;}
.wrap-valuation-text{font-size: 14px;color: #5e5e5e;}
.wrap-valuation-total{font-size: 14px;color: #5e5e5e;}
.wrap-valuation-whole{display: flex;flex-direction: row;justify-content: space-between;width: 86%;padding-left: 10upx;padding-top: 22upx;}

.wrap-complete{display: flex;flex-direction: row;justify-content: center;margin-bottom: 30upx;}
.wrap-complete-boxs{display: flex;flex-direction: row;justify-content: space-between; align-items: center;background: #f8f8f8;width: 95%;height: 100upx;border-radius: 12px;}
.wrap-complete-text{padding-left: 20upx;color: #5d5d5d;}
.wrap-complete-stars{padding-right: 20upx;}

.wrap-container{position: fixed;top: 0;left: 0;display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;padding: 0px 20px;height: 100%;width: 100%;background-color: #fff;padding-top: 15upx;overflow: hidden;	
.wrap-content-title{display: flex;flex-direction: row; align-items: center;font-size: 13px;color: #98907d;height:30px;width: 100%;line-height: 30px;letter-spacing: 2px; margin-bottom: 20upx;}
.wrap-bottom-bar{display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #948c79; height:50upx;width: 100%;}
.wrap-bottom-boxs{display: flex;flex-direction: row;align-items: center;font-size: 12px;color: #948c79;}
.wrap-bottom-date{padding-right: 20upx;}
.wrap-content{flex: 1 1 auto;overflow: hidden;.inner-box{overflow: hidden; 
.book-inner{letter-spacing: 8upx;white-space: pre-wrap;text-align:justify;text-indent: 2em;color: #584935;}}}}

.Backcolor1{background: #f3f3f3;}	
.Backcolor2{background: #dbd6c3;background-color: #dbcdb5;background-size: 100% 100%;}
.Backcolor3{background: #d6e0ca;}
.Backcolor4{background: #cad6e0;}
.Backcolor5{background: #000000;}

.wrap-tabBar{position: fixed;top: 0;left: 0;z-index: 300;
.wrap-tabBar-boxs{display: flex;flex-direction: row;align-items: center;position: absolute;left: 0;width: 100%;background-color: #ffffff;transition: top .3s;
.wrap-tabBar-head{position: relative;display: flex;justify-content: center;align-items: center;height: 40upx;width: 30%;line-height: 40upx;color: #fff;}
.wrap-tabBar-back{position: absolute;top: 0upx;left: 20upx;font-size: 18px;font-weight: bold;}
.wrap-tabBar-title{font-size: 28upx;}}
.wrap-contents{position: absolute;top: 0;display: flex;flex-flow: column;width: 80%;height: 100%;transition: left .1s;
.wrap-contents-boxs{display: flex;flex-direction: row;padding: 20upx;width: 100%;border-bottom: #c6c3b0 solid 1px;}
.wrap-contents-image{width: 80upx;min-width: 80upx;  height: 100upx;border-radius: 12upx;}
.wrap-contents-text{display: flex;flex-flow: column;justify-content: space-between;height: 90upx;padding-left: 10upx;width: 100%;}
.wrap-contents-title{font-size: 32upx;color: #564228;}
.wrap-contents-author{font-size: 13px;color: #9d937f;}
.wrap-contents-back{display: flex;justify-content: flex-end;padding-top: 10upx;font-weight: bold;}

.wrap-contents-Item{display: flex;align-items: center;margin-left: 20upx;height: 80upx;font-size: 13px;letter-spacing: 3upx;color: #9d937f;width: 90%;border-bottom: #c6c3b0 solid 1px;}.active{color: #d38d00;font-size: 14px;}}
.wrap-button{position: absolute;left: 0;width: 100%;background-color: #ffffff;border-top-left-radius:36upx;border-top-right-radius:36upx;transition: bottom .3s;font-size: 12px;color: #7f7f7f;
.wrap-slider{display: flex;justify-content: space-between;align-items: center;padding: 0 20px;height: 50px;width: 100%;font-size: 13px;}
.wrap-slider-speed{flex: 1;height: 100%;padding: 8px 0;}
.wrap-items{display: flex;justify-content: space-around;align-items: center;height: 60px;width: 100%;
.wrap-item-box{display: flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;}}}
.wrap-system{position: absolute;left: 0;display: flex;flex-direction: column;justify-content: space-around;padding: 10upx 0upx 0 20upx;width: 100%;color: #555555;background-color: #ffffff;transition: bottom .3s;border-top-left-radius:36upx;border-top-right-radius:36upx;
.wrap-system-item{display: flex;align-items: center;height: 50px;
				.Backcolor-title{padding: 10px;color: #555555;font-size: 12px;}
				.Backcolor{width: 30px; height: 30px;text-align: center;border-radius: 25px;margin-right: 66upx;}
				.mode-icon{display: flex;justify-content: center;align-items: center;width: 180upx;min-height: 60upx; height: 60upx;font-size: 12px;text-align: center;margin-right: 30upx;border-radius: 25px;border: #c3c3c3 solid 1px;}
				.bigSize{display: flex;justify-content: center;align-items: center;width: 130upx;min-height: 60upx; height: 60upx;font-size: 13px;text-align: center;margin-right: 30upx;border-radius: 25px;border: #c3c3c3 solid 1px;background: #f1f1f1;}
				.bicolor{display: flex;justify-content: center;align-items: center;width: 80upx;min-height: 60upx; height: 60upx;font-size: 13px;text-align: center;margin-right: 30upx;}
				.compose{display: flex;flex-direction: column;justify-content: space-around;align-items: center;margin-right: 30upx;padding: 5px;height: 50upx;width: 60upx;border-radius: 5px;border: #555555 solid 1px;
				.compose-line{width: 100%;border-bottom: #555555 solid 1px; }
				.lineActive{width: 100%;border-bottom: #FF9900 solid 1px; }}
				.active{color: #555555;border: #555555 solid 2px;}}}}
				
.hidden{opacity: 0;}
.action{position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;.item{flex: 1;height: 100%;}}
page{position: relative;width: 100%;height: 100%;}	
</style>